<template>
    <Dialog
      :show="dialogConfig.show"
      :title="dialogConfig.title"
      :buttons="dialogConfig.buttons"
      :showCancel="true"
      @close="dialogConfig.show = false"
        :width="600+'px'"
    >
     <div >
        <el-form
        :model="formData"
        :rules="rules"
        ref="formDataRef"
        label-width="140px"
        @submit.prevent
      >
       <el-form-item label="仓库|实验室名称" prop="warehouse" >
          <el-input :maxLength="400" placeholder="请输入仓库或实验室名称" v-model="formData.warehouse" />
       </el-form-item>

       <el-form-item label="详细地址" prop="storageLocation" >
          <el-input :maxLength="400" placeholder="请输入仓库或实验室名称" v-model="formData.storageLocation" />
       </el-form-item>
       <el-form-item label="器材数量" prop="totalQuantity">
           <el-input-number
              v-model="formData.totalQuantity"
              :min="1"
              placeholder="请输入器材数"
            />
        </el-form-item>
        <el-form-item label="可用数量" prop="availableQuantity">
           <el-input-number
              v-model="formData.availableQuantity"
              :min="1"
              placeholder="请输入可用数量"
            />
        </el-form-item>
      </el-form>
     </div>
    </Dialog>
  </template>

  <script setup>
  import { ref, reactive, getCurrentInstance, nextTick } from "vue";
  const { proxy } = getCurrentInstance();

  const api = {
    saveDeviceInfo: "/device/saveDeviceInfo",
  };


  const dialogConfig = ref({
    show: false,
    title: "",
    buttons: [
      {
        type: "primary",
        text: "确定",
        click: (e) => {
          submitForm();
        },
      },
    ],
  });

  const formData = ref({});
  const formDataRef = ref();

  const rules = {
    warehouse: [{ required: true, message: "请输入仓库或实验室地址" }],
    storageLocation: [{ required: true, message: "请输入详细地址" }],
    totalQuantity: [{ required: true, message: "请输入器材总数量" }],
    availableQuantity: [{ required: true, message: "请输入器材可以数量" }],
  };

  const showEdit = (data) => {
    dialogConfig.value.show = true;
    nextTick(() => {
      formDataRef.value.resetFields();
      if (data.inventoryId == null) {
        dialogConfig.value.title = "新增库存信息";
      } else {
        dialogConfig.value.title = "修改库存信息";
      }
      formData.value = Object.assign({}, data);
    });
  };

  defineExpose({
    showEdit,
  });

  const emit = defineEmits(["reload"]);
  const submitForm = async () => {
    formDataRef.value.validate(async (valid) => {
      if (!valid) {
        return;
      }
      let params = {};
      Object.assign(params, formData.value);
      params.status=1;
      params.equipmentId=formData.value.deviceId;
      if(params.totalQuantity<params.availableQuantity){
          proxy.Message.warning("可用数量不能大于总数量");
          return;
      }
      let result = await proxy.Request({
        url:"/device/saveInventory",
        params,
      });
      if (!result) {
        return;
      }
      dialogConfig.value.show = false;
      proxy.Message.success("保存成功");
      emit("reload");
    });
  };
  </script>

  <style lang="scss" scoped>
  .check-span-item {
    float: left;
    margin-right: 10px;
    line-height: 20px;
  }
  </style>
